<template>
    <view class="container orderdetails">
        <uni-search-bar bgColor="#fff" @confirm="search"  v-model="keyword" 
        @cancel="scancelearch" @clear="search"></uni-search-bar>
      
        <view v-for="(item,index) in lists" :key="index">

            <uni-card class="order" >
                <view slot="title">
                    <view class="order-header">
                        <view class="ordersn">
                        {{item.order_sn}}
                        工程单  
                        </view>
                        <view class="timer">
                            <uni-icons custom-prefix="iconfont" type="icon-shizhong" size="20"></uni-icons>
                            {{item.update_time}}
                        </view>
                    </view>
                    
                </view>
                <view class="content">
                    <view class="goods_name justify-between">
                        <view class="title">{{item.project_name}}</view>
                     
                        <view   class="status_name" :class="'status_'+item.status">{{item.status_name}}</view>
                    </view>
                    <view class="skulist">
                        <view><uni-icons class="icon" type="person-filled" size="20"></uni-icons>&nbsp; {{item.username}}</view>
                        <view v-if="item.phone" @click="callphone(item.phone)"><uni-icons class="icon" type="phone-filled" size="20"></uni-icons>&nbsp;  {{item.phone}} </view>    
                        <view><uni-icons class="icon" type="location-filled" size="20"></uni-icons>&nbsp;{{item.address}}</view>
                        <view><uni-icons class="icon" type="calendar" size="20"></uni-icons>&nbsp;结束日期：{{item.be_endtime}}</view>
                        <view><uni-icons class="icon" type="calendar" size="20"></uni-icons>&nbsp;开工日期：{{item.work_time}}</view>
                      
                    </view>
                </view>
                <view slot="actions" class="justify-between footers">
                    <view class="user">
                        <view class="headimg">
                            <image :src="item.client.headimg" v-if="item.client.headimg" mode="widthFix"></image>
                            <image src="@/static/logo.png" v-else mode="widthFix"></image>
                        </view>
                        <view class="nickname">{{item.client.username}}</view>
                    </view>
                    <view class="action justify-around">
                        <button type="primary" size="mini" @click="$navto(`/pages/kehu/projectdesc?id=${item.id}`)">详情</button>
                    
                    </view>
                </view>
            </uni-card>
        </view>    
  
        <Vmenu v-if="$permission('create_order')"></Vmenu>
        <view class="more">
            <template v-if="page<last_page">
                加载更多~
            </template>    
            <template v-else>
                没有更多了~
            </template>
        </view>    
    </view>
</template>

<script>
import Vmenu from '@/components/menu/menu.vue'
import OrderItem from '@/components/orderItem.vue'
export default{
    name:"orderlist",
    data(){
        return{
            nav:0,
            lists:[],
            page:1,
            last_page:1,
            status:'',
            keyword:'',
            issel:0,
            role_id:''
        }
    },
    onPullDownRefresh(){
        this.page = 1
        this.lists = []
        var _this = this
        setTimeout(function () {
            uni.stopPullDownRefresh();
            _this.getlists()
        }, 500);
    },
    onReachBottom(){
        if(this.page<this.last_page){
            this.page ++ 
            this.getlists()
        }
    },
    components: {
        Vmenu,OrderItem
    },
    watch:{
        'nav':function(newval){
          
            this.search()
        }
    },
    onLoad(option) {
        if(option.status){
            this.status = option.status
        }
        if(option.issel){
            this.issel = option.issel
        }
        this.role_id = uni.getStorageSync('nantong_role_id');
        
        this.page = 1
        this.lists = []  
        this.$msgNum()
        this.getlists()
    },
    onShow(){
   
    },
    methods:{

        scancelearch(){
            this.keyword = ''
            this.search()
        },

        search(){
            this.page = 1
            this.lists = []
            this.getlists()
        },
        getlists(){
            var url
            url = `project.order/orderlist?status=${this.status}&keyword=${this.keyword}&page=${this.page}`
            this.$api.get(url).then(({data})=>{
      
                this.last_page = data.last_page
                this.lists = this.lists.concat(data.data)
            })
        },
        delorder(id,index){
            var _this = this
            uni.showModal({
                content:'是否确认删除该订单，删除后不可恢复',
                success:function(c){
                    if(c.confirm){
                        var url
                        if(_this.role_id == 12){
                           url = `project.order/delorder`
                        }else{
                           url = `order/delorder` 
                        }
                        _this.$api.post(url,{id:id}).then((res)=>{
                            _this.lists.splice(index,1)
                        })
                    }
                }
            })
            
        }
    }
}
</script>

<style lang="less" scoped>
    .icon{
        margin-right: 10rpx;
    }
    .phone{
        color: #2979ff;
    }
    .order{
        .order-header{
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 80rpx;
            border-bottom: 1px solid #e9e9eb;
            .ordersn{
                color: #000;
                font-weight: 600;
                font-size: 24rpx;
            }
            .timer{
                font-size: 26rpx;
                color: #3a3a3a;
                display: flex;
                align-items: center;
            }
        }
        .content{
            .goods_name{
                height: 60rpx;
                .title{
                    font-weight: bold;
                }
                .status_name{
                    
                }
            }
        }
        .footers{
            height: 80rpx;
           .user{
               display: flex;
               align-items: center;
              .headimg{
                  width: 60rpx;
                  height: 60rpx;
                  margin-right: 10rpx;
                  image{
                      width: 60rpx;
                      height: 60rpx;
                      border-radius: 50%;
                  }
              } 
           }
            .action{
                align-items: center;
                button{
                    height: 60rpx;
                    margin: 0 10rpx;
                }
            } 
        }
    
    }
    .nav-item{
        font-size: 26rpx;
    }
</style>